@extends('layout.home')
@section('title', '管理报表')
@section('content')
    <style>
        *{padding: 0;margin: 0;}
        html,body{width: 100%;height: 100%;background-color: rgba(22,57,84,1)}
        .oee_line{
            text-align: center;
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
        
        table tr td
        {border:1px solid black;color: white;padding: 6px;}

    </style>
    <div id="header" style="background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center;color:white">滁州东鹏设备看板展示</div>
    {{-- <p style="text-align: center;font-size: 20px;font-weight: bold;color: black;">工时统计表</p> --}}
    {{-- <div id="main1" style="height:300px;margin-bottom: 20px;"></div> --}}
    <div class="oee_line">生产工单信息</div>
    <table border="1" width=100% align="center" bordercolor="orange">
        <tr>
        <tr>
            <td style="width: 30%">产品名称</td>
            <td style="width:70%">东鹏特饮</td>
        </tr>
          <td style="width: 30%">开始时间</td>
          <td style="width:70%" class="banci_start_time">2023-06-2411</td>
        </tr>
        <tr>
            <td style="width: 30%">结束时间</td>
            <td style="width:70%" class="banci_end_time">2023-06-2411</td>
          </tr>
          <tr>
            <td style="width: 30%">生产时长</td>
            <td style="width:70%" class="run_duration">3小时</td>
          </tr>
 
          <tr>
            <td style="width: 30%">计划产量</td>
            <td style="width:70%">999999</td>
          </tr>
          <tr>
            <td style="width: 30%">实际产量</td>
            <td style="width:70%">999999</td>
          </tr>
          <tr>
            <td style="width: 30%">能耗用量</td>
            <td style="width:70%">100KW</td>
          </tr>
          <tr>
            <td style="width: 30%;">生产进度</td>
            <td style="width:70%;padding:0">
                <div id="main3" style="height:32px;"></div>
            </td>
          </tr>
      </table>
    <div class="oee_line">综合效率OEE</div>
    <div id="main1" style="height:300px;"></div>
    <div id="main2" style="height:300px;"></div>
    <div class="oee_line" style="height: 30px"></div>
    
    <link rel="stylesheet" href="{{URL::asset('css/picktime.css')}}">
    <script src="{{URL::asset('js/picktime.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('js/layui.all.js')}}"></script>
    <script>


        function showdata(){
            let myChart1 = echarts.init(document.getElementById('main1'));
            let myChart2 = echarts.init(document.getElementById('main2'));
            let myChart3 = echarts.init(document.getElementById('main3'));

            let option1 ={
                tooltip: {formatter: 'OEE： {c}%'},
                series: [
                    {
                        name: '',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}%',
                            textStyle:{
                                color:"white",
                                fontSize:16
                            }
                        },
                        //[{value: 30, name: '完成率1'}]
                        data: [],
                        nameTextStyle:{color:"#ff9900"}
                        // itemStyle:{
                        //     borderWidth:1, //设置border的宽度有多大
                        //     borderColor:'#fff', // 设置后饼图间会有白色空隙
                        //     fontSize:12
                        // },
                    },
                ]
            };
            let option2 = {
                title: {
                    text: '单位:百分比',
                    textStyle: {//标题颜色
                        color: "white"
                    }
                },
                tooltip:  {formatter: '{a} <br/>{b} : {c}%'},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["性能开动率","时间开动率","合格率"],
                    axisLine:{
                    lineStyle:{
                        color:"#FFF"
                    }
                },
                axisLabel:{
                    textStyle:{
                        color:"#FFF"
                    }
                }

                },
                yAxis: {
                    type:"value",
                    min:0,
                    max:100,
                    axisLine:{
                    lineStyle:{
                        color:"#FFF"
                    }
                    },
                    axisLabel:{
                        textStyle:{
                            color:"#FFF"
                        }
                    }
                },
                series: [
                    {
                        name: '占比',
                        type: 'bar',
                        //data: [30, 30, 60],
                        data: [],
                        itemStyle:{
                            normal:{
                                label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'white',
										fontSize: 16
									},
                                    formatter: '{c}%'
								}

                            }
                            
                        }
                    },
            ]
		};
        let option3 = {
                grid                : {
                    left            : '2%',
                    top             : '0',
                    right           : '0',
                    bottom          : '0',
                    containLabel    : true,
                    width           : '93%'
                },
                xAxis               : {
                    type            : 'value',
                    splitLine       : {show: false},
                    axisLabel       : {show: false},
                    axisTick        : {show: false},
                    axisLine        : {show: false},
                },
                yAxis               : {
                    type            : 'category',
                    axisTick        : {show: false},
                    axisLine        : {show: false},
                    axisLabel       : {
                        color       : 'black',
                        fontSize    : 17
                    },
                },
                series              : [
                    {
                        name        : '/'+100,
                        type        : 'bar',
                        barWidth    : 18,
                        data        : [30],
                        label       : {
                            show        : true,
                            //position    : 'middle',
                            offset      : [20,2],
                            formatter   : '{c}{a}',
                            color       : '#fff',
                            fontSize    : 15
                        },
                        itemStyle       : {
                            color: new echarts.graphic.LinearGradient(
                                1, 0, 0, 0,
                                [
                                    {offset: 0, color: '#A4DF4E'},                   //柱图渐变色
                                    // {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                                    {offset: 1, color: '#5DC69D'},                   //柱图渐变色
                                ]
                            ),
                            barBorderRadius: 9,
                        },
                        zlevel                    : 1
                    },
                    {
                        name                      : '进度条背景',
                        type                      : 'bar',
                        barGap                    : '-100%',
                        barWidth                  : 18,
                        data                      : [100],
                        color                     : '#DCDCDC',//柱条颜色
                        itemStyle                 : {
                            normal                : {
                                barBorderRadius: 9,
                                borderColor: '#FEFEFE',
                            }
                        }
                    }
                ]
            };
            //设备看板接口
            $.get("services_sbkb", res => {
                let obj = res['list'][0]; 
                $(".banci_start_time").html(obj.banci_start_time);
                $(".banci_end_time").html(obj.banci_end_time);
                $(".run_duration").html(obj.run_duration+"小时");
                //***************************************************
          
                    option1.series[0]['data'].push({value: parseFloat(obj.oee), name: ''}) ;
                   
                    option2.series[0]['data'].push(parseFloat(obj.performance_rate)) ;
                    option2.series[0]['data'].push(parseFloat(obj.time_rate)) ;
                    option2.series[0]['data'].push(parseFloat(obj.qualified_rate)) ;
                   
                    myChart1.setOption(option1);//柱状图
                    myChart2.setOption(option2);//柱状图
                    myChart3.setOption(option3);//柱状图
            });
          
            
           
            
            
           
        }
        showdata();
        

        // ****************************************************
    </script>
    <script>


    </script>

    <style>#header {background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 20px;font-family: '黑体'}</style>
@endsection
